﻿
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RSS reader</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<link href="default.css" rel="stylesheet" type="text/css" />
<link href="ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

   <script src="ExtJS/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="ExtJS/ext-core.js" type="text/javascript"></script>
  <script src="ExtJS/ext-all-debug.js" type="text/javascript"></script>   
  <script src="ExtJS/ext-all.js" type="text/javascript"></script>  

  
    
    <script language="javascript">
//<!--
        var folders;
    Ext.onReady(function() {





    });

    function ChannelIsInFolder(cahnnelElement) {
        return (cahnnelElement.parent().id.indexOf("folder") >= 0)
    
    }

    function DeleteChannel(channelName) {
        var cahnnelEl= Ext.get("channel" + channelName);
        var parentEl=cahnnelEl.parent();
       cahnnelEl.hide();
       cahnnelEl.remove();
            if (Ext.get("UsersFeeds")!=parentEl && !parentEl.child("li")) 
                parentEl.child("*[class=deleteIcon]").show(true);

        }

        function DeleteFolder(folderName) {
            
            Ext.get("folder" + folderName).remove();
        
        
        }

function channelFolderChnaged(channelName, foldername) {

    Ext.get("TargetFolder").dom.value=foldername;
    Ext.get("CahnnelToChange").dom.value=channelName;
}



function ShowChannelEditDialog(channelName) {
    var foldersSelect = "<select id='folder' onchange=\"channelFolderChnaged('"+channelName+"',this.value)\">";
    Ext.get("TargetFolder").dom.value = "none";
    Ext.get("CahnnelToChange").dom.value = channelName;
    foldersSelect += "<option>none</option>";
    if(!folders)
    folders = Ext.query("*[id^=folder]");
    
     Ext.each(folders, function(arrayItem, index, allItems) {
           var folderName=Ext.get(arrayItem.id).child("*[class=folderName]").dom.value;
            foldersSelect += "<option>" + folderName + "</option>";
      });
       foldersSelect+="</select>";
        Ext.Msg.show({
            title: "Edit channel " + channelName,
            msg: "Choose folder for channel:"+foldersSelect,
            buttons: Ext.Msg.OKCANCEL,
            fn: changeChannelsFolder

            
        });


  }


  function changeChannelsFolder(btn, emptyhere) {

     if (btn = "ok"){
         var cahnnel = Ext.get("CahnnelToChange").dom.value;
         var folder = Ext.get("TargetFolder").dom.value;
      
         var cahnnelEl = Ext.get("channel" + cahnnel);
            if (folder != "none") {
                var folderUl = Ext.get("folder" + folder);
                folderUl.child("*[class=deleteIcon]").show();
                DeleteChannel(cahnnel);
               AddChannel(cahnnel, folderUl);
            }
            else {
                // if channel is in folder, adding it to root of tree (traget folder is none)
                if (cahnnelEl.parent().id.indexOf("folder") >= 0) {
                    DeleteChannel(cahnnel);
                    AddChannel(cahnnel, Ext.get("UsersFeeds"));
                }
             
            }
          
     }
    }

 

   function UpdateProfile(){
      ShowChannels();
      Ext.Msg.alert('','Profile updated.');

   }

   
   function ShowProfile() {
       Ext.get("UsersFeeds").hide(true);
       Ext.get("UsersFeeds").setDisplayed("none");
       Ext.get("ProfileLink").hide(true);
       Ext.get("ProfileLink").setDisplayed("none");
       Ext.get("ChannelsLink").show(true);
       Ext.get("ProfileTable").show(true);


   }

   function ShowChannels() {
       Ext.get("ProfileTable").hide();
       Ext.get("ProfileTable").setDisplayed("none");
       Ext.get("ChannelsLink").hide(true);
      
       Ext.get("ChannelsLink").setDisplayed("none");
       Ext.get("ProfileLink").show(true);
       Ext.get("UsersFeeds").show(true);

   }

   


   function ShowFeeds(title) {
       if (title == "") {
           Ext.Msg.alert('', 'Enter valid channel');
           return;
       }
     Ext.get("HelloTextDiv").hide(true);
     Ext.get("HelloTextDiv").setDisplayed("none");
     Ext.get("feeds").show(true);
    
     Ext.get("ChannelTitle").dom.innerHTML = title;
 }

 function RefreshFeed() {
     Ext.get("feedsContent").hide();
     Ext.get("feedsContent").show(true);
 }


 function CreateFolder() {
      Ext.MessageBox.show({
           title: 'New folder',
           msg: 'Folders name:',
           width:300,
           buttons: Ext.MessageBox.OKCANCEL,
           multiline: 20,
           fn: showResultText,
           animEl: 'CreateFolderLink'
       });
       ShowChannels();
       folders = Ext.query("*[id^=folder]");
 }


 function SaveChannel() {
     if (!Ext.get('channel' + Ext.get("ChannelTitle").dom.innerHTML))
       AddChannel(Ext.get("ChannelTitle").dom.innerHTML, Ext.get("UsersFeeds"));
   else
      Ext.Msg.alert('', 'Channel allready saved.');
 
 
 }




 function AddFolder(text) {
     var folder = "<ul id='folder" + text + "'><img width='23' height='22' src='images/openFolder.jpeg'/>";
     folder += "<a href='#'><img class='deleteIcon'  src='images/delete.gif' onclick=\"DeleteFolder('" + text + "')\" /></a>";
     folder += "<input type='hidden' class='folderName' value='" + text + "'/>";
     folder+="&nbsp;" + text + "</ul>";
     Ext.get("UsersFeeds").insertHtml("afterBegin", folder);
     folders = Ext.query("*[id^=folder]");

 }

 function AddChannel(text, parentElement) {
	
     var basicHtml = "id='channel" + text + "'>";
       basicHtml+="<a href='#'><img src='images/delete.gif' onclick=\"DeleteChannel('"+text+"')\" /></a>";
       basicHtml+="<a href='#'><img src='images/edit.gif' onclick=\"ShowChannelEditDialog('" + text + "')\" border='0'/></a>";
       basicHtml+="&nbsp;<a href='#' onclick=\"ShowFeeds('" + text + "')\">" + text + "</a>";
       var startTag="";
       var endTag = "";
       var target = "beforeEnd";
     if (parentElement != Ext.get("UsersFeeds")) {
         startTag = "<li ";
         endTag = "</li>";
        
         parentElement.child("*[class=deleteIcon]").hide();
         parentElement.child("*[class=deleteIcon]").setDisplayed("none");
     }
     else {
         startTag = "<ul ";
         endTag = "</ul>";
         target = "afterBegin";
    

      }
    
      parentElement.insertHtml(target,startTag + basicHtml + endTag);

 }
 
 function showResultText(btn, text){
     if (btn = "ok") {
         if (text != "")
             AddFolder(text);
        else
             Ext.Msg.alert('', 'Enter folders name.');
             
     
     }
    }
 //-->
     </script>
  
</head>
<body>

<input type="hidden" id="TargetFolder" />
<input type="hidden" id="CahnnelToChange" />
<div id="outer">
	<div id="header">
		<h1><a href="#">RSS reader</a></h1>
	</div>
	<div id="menu">
		<ul style="left: 0px; top: 3.3em; width: 420px;">
			<li>Enter URL:
                <input id="feedInput" type="text" /><a href="#" onclick="ShowFeeds(Ext.get('feedInput').dom.value)">Show feed</a></li></ul>
		
	</div>
	<div id="content">
		<div id="primaryContentContainer">
			<div id="primaryContent">
			<div id="HelloTextDiv">
				<h2>Welcome to our RSS-reader!</h2>
				<p>
                    Here you can watch RSS-feeds and orginise them for youself!</p>
                 </div>
                 <div id="feeds" style="display:none">
                  <div id="cahnnelMenu"><span id="ChannelTitle" class="chinnelTitle">EURONEWS</span><br/>
                      <a href="#" onclick="RefreshFeed()"> Refresh </a>&nbsp;<a href="#" onclick="SaveChannel()"> Save channel</a>&nbsp;
                 </div>
                 <br/>
                <div  id="feedsContent">
            
                <div>
                    <span class="feedTitle">
                        <a href="http://feedproxy.google.com/%7Er/euronews/en/news/%7E3/i7TzKISrTAE/">
                    Frattini: &quot;Protectionism is not the right solution to counter the crisis&quot;</a>
                    </span>

                    <span class="ItemPostedDate">
                        Posted: Wed, 25 Feb 2009 21:20:12 +0100/h5&gt;
                    </span>

               </div>
               
             <div class="ItemMenu">
                     <a href="#"> Save item</a>&nbsp;
               </div>
               <br />
                <div>
                    <span class="feedTitle">
                        <a href="http://feedproxy.google.com/%7Er/euronews/en/news/%7E3/rFmUMvWKxVA/">
                    Bissau army vows to defend democracy</a>
                    </span>
                    <span class="ItemPostedDate">
                       Posted: Mon, 02 Mar 2009 17:17:07 +0100
                  </span>
                <div class="ItemMenu">
                     <a href="#"> Save item</a>&nbsp;
               </div>
               <br />
              </div>
                <div>
                    <span class="feedTitle">
                        <a href="http://feedproxy.google.com/%7Er/euronews/en/news/%7E3/Z0ntntHKVCw/">
                    Kosovo&#39;s PM on one year in power</a>
                    </span>
                    <span class="ItemPostedDate">
                        Posted: Mon, 16 Feb 2009 17:32:52 +0100</span>
                <div class="ItemMenu">
                     <a href="#"> Save item</a>&nbsp;
               </div>
               <br />
                </div>
                <div>
                    <span class="feedTitle">
                        <a href="http://feedproxy.google.com/%7Er/euronews/en/news/%7E3/bKlLey_7fJk/">
                    Portugal offers help to maintain order in Guinea-Bissau</a>
                    </span>
                    <span class="ItemPostedDate">
                        Posted: Mon, 02 Mar 2009 19:11:05 +0100</span>
                    <div class="ItemMenu">
                     <a href="#"> Save item</a>&nbsp;
               </div>
               <br />
                </div>
                <div>
                    <span class="feedTitle">
                        <a href="http://feedproxy.google.com/%7Er/euronews/en/news/%7E3/08JLmdnCeUE/">
                    What is Israel voting for?</a>
                    </span>
                    <span class="ItemPostedDate">
                        Posted: Mon, 09 Feb 2009 18:37:04 +0100</span>
                <div class="ItemMenu">
                     <a href="#"> Save item</a>&nbsp;
               </div>
               <br />
                </div>
                <div>
                    <span class="feedTitle">
                        <a href="http://feedproxy.google.com/%7Er/euronews/en/news/%7E3/Hj9M_cEqrvU/">
                    Billions donated to rebuild Gaza</a>
                    </span>
                    <span class="ItemPostedDate">
                        Posted: Mon, 02 Mar 2009 19:23:04 +0100</span>
                  <div class="ItemMenu">
                     <a href="#"> Save item</a>&nbsp;
               </div>
               <br />
                </div>
                <div>
                    <span class="feedTitle">
                        <a href="http://feedproxy.google.com/%7Er/euronews/en/news/%7E3/hVWxyRdTHA8/">
                    Lukashenko: &quot;Our interest in our relationship with the European Union is beyond 
                    doubt.&quot;</a>
                    </span>
                    <span class="ItemPostedDate">
                        Posted: Thu, 05 Feb 2009 21:23:55 +0100</span>
                        <div class="ItemMenu">
                     <a href="#"> Save item</a>&nbsp;
               </div>
               <br />
                </div>
                    </div>
                </div>
			            </div>
		</div>
		<div id="secondaryContent">
		
			<a href="#" onclick="ShowProfile()" id="ProfileLink">Profile</a><a id="ChannelsLink" href="#" onclick="ShowChannels()" style="display:none" >Channels</a>&nbsp; <a id="CreateFolderLink" href="#" onclick="CreateFolder()" >New folder</a> <a href="index.html">Logout</a>
			<br/>
			<br/>
			
			<div id="UsersFeeds">
				<ul id="folderNews"> <a href="#"><img width="23" height="22" src='images/openFolder.jpeg'/></a><a href="#"><img class="deleteIcon" src='images/delete.gif' onclick="DeleteFolder('News')"  style="display:none" /></a>
						<input type="hidden" class="folderName" value="News"/>
						News
					<li id="channelEuronews"><a href="#"><img src='images/delete.gif' onclick="DeleteChannel('Euronews')" /></a><a href="#"><img src='images/edit.gif' onclick="ShowChannelEditDialog('Euronews')" border='0'/></a>&nbsp; <a href="#" onclick="ShowFeeds('Euronews')">Euronews</a></li>
					<li id="channelBBC"><a href="#"><img src='images/delete.gif' onclick="DeleteChannel('BBC')" /></a><a href="#"><img src='images/edit.gif' onclick="ShowChannelEditDialog('BBC')" border='0'/></a>&nbsp; <a href="#" onclick="ShowFeeds('BBC')">BBC</a></li>
					<li id="channelCNN"><a href="#"><img src='images/delete.gif' onclick="DeleteChannel('CNN')" /></a><a href="#"><img src='images/edit.gif' onclick="ShowChannelEditDialog('CNN')" border='0'/></a>&nbsp; <a href="#" onclick="ShowFeeds('CNN')">CNN</a></li>
				</ul>
				<ul id="folderBlog"><a href="#"><img width="23" height="22" src='images/openFolder.jpeg'/></a><a href="#"><img class="deleteIcon"  src='images/delete.gif' onclick="DeleteFolder('Blog')"  style="display:none" /></a>
						<input type="hidden" class="folderName" value="Blog"/>
						Blogs
					<li id="channelSomeBlogi"><a href="#"><img src='images/delete.gif' onclick="DeleteChannel('SomeBlogi')" /></a><a href="#"><img src='images/edit.gif' onclick="ShowChannelEditDialog('SomeBlogi')" border='0'/></a>&nbsp;<a href="#" onclick="ShowFeeds('SomeBlogi')"> SomeBlogi</a></li>
					<li id="channelFacebook"><a href="#"><img src='images/delete.gif' onclick="DeleteChannel('Facebook')" /></a><a href="#"><img src='images/edit.gif' onclick="ShowChannelEditDialog('Facebook')" border='0'/></a>&nbsp; <a href="#" onclick="ShowFeeds('Facebook')">Facebook</a></li>
					<li id="channelMyBlogs"><a href="#"><img src='images/delete.gif' onclick="DeleteChannel('MyBlogs')" /></a><a href="#"><img src='images/edit.gif' onclick="ShowChannelEditDialog('MyBlogs')" border='0'/></a>&nbsp;<a href="#" onclick="ShowFeeds('MyBlogs')"> MyBlogs</a></li>
				</ul>
			</div>

			<table id="ProfileTable" style="visibility:hidden">
				<tr>
					<td>Login:</td>
                    <td><input id="Text4" type="text" style="width: 89px" /></td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td><input id="Password1" type="password" style="width: 86px" /></td>
                </tr>
               
                <tr>
                    <td>Email</td>
                    <td><input id="Text6" type="text" style="width: 89px" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><a href="#" onclick="UpdateProfile()">Update</a></td>
                </tr>
            </table>
		
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
		<a href="http://www.zeroweb.org"></a><br />
<br />
        &nbsp;</div>
</div>
</body>
</html>
